<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC-六格功能介绍</title>
</head>

<body>


    <div class="core-features">
        <div class="features">
            <div class="feat">
                <div class="feat-top">
                    <div class="feat-title">勒索病毒防护</div>
                    <div class="feat-description">看得见，防的住，行业领先的勒索解决方案</div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t01b76fbddbd8153f48.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">勒索防护</div>
                    <div class="feat-cap">文档防护</div>
                    <div class="feat-cap">接入管理</div>
                    <div class="feat-cap">安全基线</div>
                </div>
            </div>

            <div class="feat">
                <div class="feat-top dark">
                    <div class="feat-title">数据安全</div>
                    <div class="feat-description">数据可视化、云端一体化、全流程安全保护</div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t01b25780316fc9cb06.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">屏幕水印</div>
                    <div class="feat-cap">定时锁屏</div>
                    <div class="feat-cap">数据统计报表</div>
                    <div class="feat-cap">数据云</div>
                </div>
                <!--标识-->
                <div class="feature-label">
                    <div class="inner">必备</div>
                    <div class="shadow"></div>
                </div>
            </div>

            <div class="feat">
                <div class="feat-top">
                    <div class="feat-title">上网安全</div>
                    <div class="feat-description">统一浏览器管理、黑白名单设置等行为限制</div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t016f5542f197135f43.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">上网行为管理</div>
                    <div class="feat-cap">IP及端口禁用</div>
                    <div class="feat-cap">上网拦击统计</div>
                    <div class="feat-cap">浏览器管理</div>
                </div>
                <!--标识-->
                <div class="feature-label">
                    <div class="inner">热门</div>
                    <div class="shadow"></div>
                </div>
            </div>


            <div class="feat">
                <div class="feat-top dark">
                    <div class="feat-title">统一终端管理</div>
                    <div class="feat-description">安全状态实时刷新、安全管理策略批量配置</div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t011f7174c5dc134d3a.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">全方位安全防护</div>
                    <div class="feat-cap">终端批量管理</div>
                    <div class="feat-cap">分级分组策略</div>
                    <div class="feat-cap">USB外设管理</div>
                </div>
                <!--标识-->
                <div class="feature-label">
                    <div class="inner">行业领先</div>
                    <div class="shadow"></div>
                </div>
            </div>


            <div class="feat">
                <div class="feat-top">
                    <div class="feat-title">资产管理</div>
                    <div class="feat-description">
                        <div class="feat-desc">清晰了解全局资产信息</div>
                        <div class="feat-desc">资产变更及时响应</div>
                    </div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t0177fb453fcaae8201.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">资产信息统计</div>
                    <div class="feat-cap">硬件性能报告</div>
                    <div class="feat-cap">硬件资产盘点</div>
                    <div class="feat-cap">风险预警</div>
                </div>
            </div>


            <div class="feat">
                <div class="feat-top dark">
                    <div class="feat-title">软件管理</div>
                    <div class="feat-description">
                        <div class="feat-desc">掌握全局软件安装信息</div>
                        <div class="feat-desc">按需管控软件使用</div>
                    </div>
                    <div class="light"></div>
                </div>
                <div class="feat-icon" style="background-image:url(./images/t0100bd9ac77dc9e119.png)"></div>
                <!--底部四栏-->
                <div class="feat-capabilities">
                    <div class="feat-cap">软件使用管理</div>
                    <div class="feat-cap">正版软件授权</div>
                    <div class="feat-cap">软件分发</div>
                    <div class="feat-cap">启动项优化</div>
                </div>
                <!--标识-->
                <div class="feature-label">
                    <div class="inner">最新</div>
                    <div class="shadow"></div>
                </div>
            </div>


        </div>
    </div>
    <style>
        .features {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 48px auto 0;
            width: 1200px;
        }

        .core-features .features .feat {
            position: relative;
            flex: 376px 0 0;
            margin-bottom: 36px;
            height: 324px;
        }

        /*标题介绍*/
        .core-features .features .feat-top {
            position: relative;
            height: 186px;
            color: #fff;
            background: linear-gradient(244deg, #3476ff 1%, #1c54e8);
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            overflow: hidden;
        }

        .core-features .features .feat-title {
            padding: 36px 0 20px 40px;
            height: 36px;
            line-height: 36px;
            font-size: 28px;
            font-family: PingFangSC-Medium;
            box-sizing: content-box;
        }

        .core-features .features .feat-description {
            width: 210px;
            padding-left: 40px;
            line-height: 24px;
        }

        .core-features .features .feat-desc {
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular;
        }

        .core-features .features .light {
            top: 0;
            width: 185px;
            height: 176px;
            background-image: url(./images/t01a7e2846fb7684833.png);
            opacity: .5;
            transition: opacity .3s;

            position: absolute;
            right: 0;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .core-features .features .feat:hover .light {
            opacity: 1;
        }

        /*浮动图片*/
        .core-features .features .feat-icon {
            bottom: 108px;
            width: 140px;
            height: 200px;
            transform: translateY(0);
            transition: transform .3s;
            transition-delay: .1s;

            position: absolute;
            right: 0;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .core-features .features .feat:hover .feat-icon {
            transform: translateY(-30px);
        }

        /*底部四栏*/
        .core-features .features .feat-capabilities {
            position: relative;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 24px 40px;
            height: 138px;
            filter: drop-shadow(0 0 16px rgba(51, 117, 255, .16));
            background-image: url(./images/t01ef1d8e5fbd9e54d2.png);
            background-size: cover;
        }

        .core-features .features .feat-cap {
            margin-bottom: 9px;
            width: 140px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 4px;
            background: #fff;
            font-size: 16px;
        }

        /*黑暗模式*/
        .core-features .features .feat-top.dark {
            background: linear-gradient(245deg, #3b4c74, #283553 97%);
        }

        .core-features .features .feature-label {
            position: absolute;
            top: 12px;
            left: -6px;
            height: 22px;
        }

        /*标识*/
        .feature-label .inner {
            position: absolute;
            top: 0;
            left: 0;
            padding: 0 10px;
            height: 100%;
            line-height: 22px;
            border-radius: 2px;
            font-family: PingFangSC-Regular;
            color: #fff;
            background: linear-gradient(90deg, #ff9735 9%, #fc6130 97%);
            white-space: nowrap;
            z-index: 20;
        }

        .feature-label .shadow {
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 0;
            border-color: #bf3a0f #bf3a0f transparent transparent;
            border-style: solid;
            border-width: 3px;
            z-index: 10;
        }


        *,
        :after,
        :before {
            box-sizing: border-box;
        }
    </style>
</body>

</html>